body {
  font-family: "JetBrains Mono", monospace;
  background: linear-gradient(to bottom, #2979ac, #becbd4);
  color: #d6deeb;
  margin: 0;
  padding: 50px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* 确保 padding 不会增加页面宽度 */
}

/* --------------代码窗口样式-------------- */
.code-window {
  background-color: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  width: fit-content;
  min-width: 300px;
  max-width: calc(100vw - 100px);
  padding: 20px;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 标题栏样式 */
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.title-bar .buttons {
  display: flex;
  gap: 8px;
}

.title-bar .buttons span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.title-bar .buttons span.close {
  background-color: #ff5f56;
}

.title-bar .buttons span.minimize {
  background-color: #ffbd2e;
}

.title-bar .buttons span.maximize {
  background-color: #27c93f;
}

/* 代码容器样式 */
#code-container {
  white-space: pre;
  font-size: 16px;
  line-height: 1.5;
  background-color: #1e1e1e;
  padding: 15px;
  border-radius: 4px;
  color: #d6deeb;
  cursor: text;
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* 移入样式 */
#code-container:hover {
  outline: 1px solid #f7c457;
}

/* 聚焦样式 */
#code-container:focus {
  outline: 1px solid #f7c457;
}

/* 代码高亮样式 */
.keyword {
  color: #4c9ccd;
}
.string {
  color: #d69d85;
}
.comment {
  color: #519B45;
}
.function {
  color: #dbdcaa;
}
.class {
  color: #40c2a5;
}
.interface {
  color: #b8d7a3;
}
.punctuation {
  color: #d6deeb;
}
.default {
  color: #dcdcdc;
}

/* --------------控制区域样式-------------- */
#controls {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: rgba(30, 30, 30, 0.9);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#controls label {
  font-size: 14px;
}

/* 移除 input[type="number"] 的默认滑块 */
#speed {
  -webkit-appearance: none; /* 移除 Chrome/Safari 的默认样式 */
  -moz-appearance: textfield; /* 移除 Firefox 的默认样式 */
  appearance: none; /* 移除所有浏览器的默认样式 */
  margin: 0; /* 移除默认的 margin */
}

/* 移除 input[type="number"] 的上下箭头 */
#speed::-webkit-inner-spin-button,
#speed::-webkit-outer-spin-button {
  -webkit-appearance: none; /* 移除 Chrome/Safari 的上下箭头 */
  margin: 0; /* 移除默认的 margin */
}

/* 自定义 input 样式 */
#speed {
  width: 115px;
  padding: 8px;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #1e1e1e;
  color: #d6deeb;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  text-align: center;
  transition: background-color 0.3s, border-color 0.3s;
}

#speed:hover {
  background-color: #2a2a2a;
  border-color: #f7c457;
}

#speed:focus {
  outline: none;
  border-color: #f7c457;
  background-color: #2a2a2a;
}

#controls button {
  padding: 8px 16px;
  background-color: #e2e8f0;
  border: none;
  border-radius: 4px;
  color: #1e1e1e;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

#controls button:hover {
  background-color: #f7c457;
}
